<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>实时概况</span>
        <el-button class="button" text>更新时间：14:00</el-button>
      </div>
    </template>
    <el-row :gutter="12">
      <el-col :span="12">
        <el-card shadow="hover" class="border-0">
          <h4 class="m-0">会员统计</h4>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">会员总数：1000000</li>
            <li class="list-inline-item">会员生日：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日注册：0</li>
            <li class="list-inline-item">本周注册：0</li>
            <li class="list-inline-item">本月注册：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日活跃：0</li>
            <li class="list-inline-item">本周活跃：0</li>
            <li class="list-inline-item">本月活跃：0</li>
            <li class="list-inline-item">会员生日：0</li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="border-0">
          <h4 class="m-0">商品统计</h4>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">商品总数：1000000</li>
            <li class="list-inline-item">商品金额：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日销量：0</li>
            <li class="list-inline-item">本周销量：0</li>
            <li class="list-inline-item">本月销量：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">缺货警报：0</li>
            <li class="list-inline-item">滞销警报：0</li>
            <li class="list-inline-item">滞销金额：0</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" class="mt-2">
      <el-col :span="12">
        <el-card shadow="hover" class="border-0">
          <h4 class="m-0">订单统计</h4>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">订单总数：1000000</li>
            <li class="list-inline-item">订单金额：0</li>
            <li class="list-inline-item">待付款：0</li>
            <li class="list-inline-item">待发货：0</li>
            <li class="list-inline-item">代签收：0</li>
            <li class="list-inline-item">退款中：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日订单：0</li>
            <li class="list-inline-item">本周订单：0</li>
            <li class="list-inline-item">本月订单：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日小计：0</li>
            <li class="list-inline-item">本周小计：0</li>
            <li class="list-inline-item">本月小计：0</li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="border-0">
          <h4 class="m-0">运营统计</h4>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">访问次数：1000000</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日访客：0</li>
            <li class="list-inline-item">本周访客：0</li>
            <li class="list-inline-item">本月访客：0</li>
          </ul>
          <ul class="list-inline  text-secondary">
            <li class="list-inline-item">今日系统错误：0</li>
            <li class="list-inline-item">今日恶意攻击：0</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <template #header>
      <div class="card-header">
        <span>待办事项</span>
      </div>
    </template>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-statistic title="代付款订单" :value="10" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="待发货订单" :value="10" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="退款中订单" :value="10" />
      </el-col>
      <el-col :span="6">
        <el-statistic title="库存预警" :value="10" />
      </el-col>
    </el-row>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <template #header>
      <div class="card-header">
        <span>常用功能</span>
      </div>
    </template>
    <el-row :gutter="12">
      <el-col :span="5">
        <el-button class="btn-icon-text" link>
          <el-icon size="30">
            <Box />
          </el-icon>
          商品管理
        </el-button>
      </el-col>
      <el-col :span="5">
        <el-button class="btn-icon-text" link>
          <el-icon size="30">
            <ShoppingCartFull />
          </el-icon>
          订单管理
        </el-button>
      </el-col>
      <el-col :span="5">
        <el-button class="btn-icon-text" link>
          <el-icon size="30">
            <User />
          </el-icon>
          会员管理
        </el-button>
      </el-col>
      <el-col :span="5">
        <el-button class="btn-icon-text" link>
          <el-icon size="30">
            <Operation />
          </el-icon>
          系统设置
        </el-button>
      </el-col>
      <el-col :span="4">
        <el-button class="btn-icon-text" link>
          <el-icon size="30">
            <Position />
          </el-icon>
          一键优化
        </el-button>
      </el-col>
    </el-row>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <EChartOfMember></EChartOfMember>
  </el-card>
  <el-card shadow="hover" class="mt-2">
    <EChartOfOrder></EChartOfOrder>
  </el-card>

 
  <div>
      <audio controls src="http://127.0.0.1:8101/static/music/千千万万 - 深海鱼子酱.mp3">当前浏览器不支持audio标签</audio>
    </div>
  <el-card shadow="hover" class="mt-2">
    <div class="d-flex justify-content-between ">
      <span>现在是 2024-04-23 17:21:30 星期天</span>
      <span>您已经工作了5小时，注意劳逸结合，保护眼睛哦。</span>
    </div>
  </el-card>
</template>

<script setup>
import EChartOfMember from './components/EChartOfMember.vue';
import EChartOfOrder from './components/EChartOfOrder.vue';
import { onMounted } from 'vue';

onMounted(() => {

})
</script>
